<template>
	<view class="content">
	<!-- 	<page-container :overlay="false" :show="isShowPage" @beforeleave="beforeleave"
			custom-style="height:100vh;overflow:scroll"> -->
		<view class="content-main">
			<view class="flex space-between">
				<view class="fontSize-32 color-666">
					门牌号{{big_sort}}-{{small_sort}}
				</view>
				<view class="fontSize-32 color-666 weight-700" @click="editShow = true">
					{{list.name}}
				</view>
			</view>
			<view class="flex space-between items-center" style="width: 80%;margin: 0 auto; margin-top: 100rpx;">
				<view class="">
					<view class="fontSize-40 color-333 weight-700 height-120  flex column"
						v-for="(item,index) in wordsList1" :key="index">
						{{index+1}}.{{item.wordHead}}
					</view>
				</view>
				<view class="">
					<view class="fontSize-40 color-333 weight-700 height-120  flex column"
						v-for="(item,index) in wordsList2" :key="index">
						{{index+4}}.{{item.wordHead}}
					</view>
				</view>


			</view>
			<view class="flex space-between img-section">
				<image :src="list.decorate" mode="" style="width: 276rpx; height: 276rpx;" class="decorate-img"
					@click="animalShow = true"></image>
				<image :src="list.plant" mode="" style="width: 180rpx; height: 180rpx;" class="plant-img"
					@click="plantShow = true"></image>

			</view>
		</view>
		<!-- </page-container> -->
		<up-popup :show="show" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="popup_title">
					温馨提示
				</view>
				<!-- 你可以<text style="color:#51D580">跳过本阶训练</text> -->
				<view class="popup_pro">
					别放弃，坚持就是胜利!后面的训练趣味十足。
				</view>
				<view class="flex u-flex-between padding-30 marginTop-15">
					<view class="popup_cancel" @click="cancel">
						取消
					</view>
					<view class="popup_sure" @click="confirm">
						继续
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="plantShow" mode="bottom" closeOnClickOverlay='true' closeable='true' round='20'
			@close="closePlant">
			<view class="popup-main">
				<view class="fontSize-32 color-333 text-center">
					请选择家庭植物
				</view>
				<view class="flex space-between items-center flex-wrap box-sizing marginTop-40">
					<view class="box-sizing width-180 height-180 borderRadius-30" v-for='(item,index) in plantList'
						:key='index' @click='selectImgSrc(item,index)' :style="getImageStyle(index)">
						<image :src="item" mode="" style="width: 100%; height: 100%;" class="box-sizing"></image>
					</view>

				</view>
				<view
					class="width-full height-104 borderRadius-92 color-white text-center fontSize-32 colorBj-51D580 marginTop-46"
					@click='toPlant' style="line-height: 104rpx;">
					种植
				</view>
			</view>

		</up-popup>
		<!-- 修改动物 -->
		<up-popup :show="animalShow" mode="bottom" closeOnClickOverlay='true' closeable='true' round='20'
			@close="closeAnimal">
			<view class="popup-main">
				<view class="fontSize-32 color-333 text-center">
					请选择家庭饰物
				</view>
				<view class="flex space-between items-center flex-wrap box-sizing marginTop-40">
					<view class="box-sizing width-180 height-180 borderRadius-30" v-for='(item,index) in decorateList'
						:key='index' @click='selectImgSrc2(item,index)' :style="getImageStyle2(index)">
						<image :src="item" mode="" style="width: 100%; height: 100%;" class="box-sizing"></image>
					</view>

				</view>
				<view
					class="width-full height-104 borderRadius-92 color-white text-center fontSize-32 colorBj-51D580 marginTop-46"
					@click='toAnimal' style="line-height: 104rpx;">
					使用
				</view>
			</view>

		</up-popup>
		<!-- 修改名称 -->
		<up-popup :show="editShow" mode='center' bgColor='transparent'>
			<view class="edit_bg" :style="{
		        backgroundImage: `url('${editBj}')`,
		        backgroundSize: '100% 100%',
		      }">
				<view class="fontSize-52 color-white weight-700 text-center marginTop-30" style="letter-spacing: 6px;">
					{{givename.title1}}
				</view>
				<view class="fontSize-36 color-333 weight-700 text-center marginTop-100">
					{{givename.title2}}
				</view>
				<view class="">
					<up-input placeholder="最多五个字" border="surround" v-model="inputVal" maxlength='5'></up-input>
				</view>
				<view class="btn-section">
					<view class="btn2" style="background: #ccc;margin-right: 22rpx;" @click='editShow = false'>
						取消
					</view>
					<view class="btn2" @click='edit'>
						确定
					</view>
				</view>
			</view>
		</up-popup>
		<view class="marginTop-10 " >
			<view class="fontSize-26 color-999 paddingTop-10 text-center">
				点击家名称可以给家换个名字
			</view>
			<view class="fontSize-26 color-999 text-center">
				点击图片可以给家修改装饰
			</view>
		</view>
		<view class="btn" @click.stop="toPage">
			保存继续
		</view>

		<view class="mask-img" v-if="maskShow == true" @click.stop="maskShow = false">

		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
	} from '@dcloudio/uni-app';

	const getSmallFamilyWordsApi = inject("getSmallFamilyWords");
	const getAreaWordsApi = inject("getAreaWords");
	const upnameApi = inject('upname');
	const getplantApi = inject('getplant');
	const page = ref(1);
	const big_sort = ref(1);
	const small_sort = ref(1);
	const wordsList1 = ref([]);
	const wordsList2 = ref([]);
	const list = ref([]);
	const decorateList = ref([]);
	const plantList = ref([]);
	const maskShow = ref(true);
	const plantShow = ref(false);
	const animalShow = ref(false);
	const editShow = ref(false);
	const show = ref(false)
	const isShowPage = ref(true)
	const inputVal = ref('');
	const givename = ref([]);
	const editBj = ref('')
	const selectImg = ref('');
	const selectAnimal = ref('');
	const selectedIndex = ref(-1);
	const selectedIndex2 = ref(-1);

	// 离开出现的弹窗
	const beforeleave = (e) => {
		isShowPage.value = false
		show.value = true
	}
	const cancel = () => {
		uni.navigateBack()
	}
	const confirm = () => {
		isShowPage.value = true
		show.value = false
	}
	onLoad((op) => {
		page.value = op.page;
		big_sort.value = op.big_sort;
		small_sort.value = op.small_sort;
		if (op.status == 1) {
			maskShow.value = false
		}
		getWord()

		getAreaWordsApi({
			page: page.value
		}).then(res => {

			givename.value = res.givename[0]
			editBj.value = res.givename[0].qmbgc_image

		})
	

	})
	const getWord = () => {
		getSmallFamilyWordsApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
			type: '1'
		}).then(res => {
			console.log(res)
			wordsList1.value = res.wordsList1
			wordsList2.value = res.wordsList2
			list.value = res
			getplantApi().then(res => {
				console.log(res)
				plantList.value = res.plantlist
				decorateList.value = res.decoratelist
				res.decoratelist.forEach((item,index)=>{
					if(item==list.value.decorate){
						selectedIndex2.value=index
						getImageStyle2()
					}
				})
				res.plantlist.forEach((item,index)=>{
					if(item==list.value.plant){
						selectedIndex.value=index
						getImageStyle()
					}
				})
			})
		})
	}
	const selectImgSrc = (item, index) => {
		selectImg.value = item
		selectedIndex.value = index;
	}
	const selectImgSrc2 = (item, index) => {
		selectAnimal.value = item
		selectedIndex2.value = index;
	}
	const getImageStyle2 = (index) => {
		if (index === selectedIndex2.value) {
			return {
				border: '2rpx solid #51D580',

			};
		}
		return {};
	};

	const getImageStyle = (index) => {
		if (index === selectedIndex.value) {
			return {
				border: '2rpx solid #51D580',

			};
		}
		return {};
	};
	const toAnimal = () => {
		upnameApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
			type: 'decorate',
			name: selectAnimal.value,
		}).then(res => {
			animalShow.value = false
			getWord()
		})
	}
	const toPlant = () => {
		upnameApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
			type: 'plant',
			name: selectImg.value,
		}).then(res => {
			console.log(res)
			plantShow.value = false
			getWord()
		})
	}
	const edit = () => {
		upnameApi({
			page: page.value,
			big_sort: big_sort.value,
			small_sort: small_sort.value,
			type: 'name',
			name: inputVal.value,
		}).then(res => {
			console.log(res)
			editShow.value = false
			getWord()


		})



	}
	const toPage = () => {
		uni.redirectTo({
			url: '/pagesA/reciteWords/wordDesc?step=2' + '&big_sort=' + big_sort.value +
				'&page=' + page.value + '&small_sort=' + small_sort.value
		})
	}
	const closePlant = () => {
		plantShow.value = false
	};
	const closeAnimal = () => {
		animalShow.value = false
	};
</script>

<style scoped lang="scss">
	.content-main {
		width: 710rpx;
		height: 1140rpx;
		background: #F4FFF8;
		border: 10rpx solid #51D580;
		box-sizing: border-box;
		padding: 42rpx 52rpx;
		overflow: hidden;
		margin: 0 auto;
		margin-top: 40rpx;
		position: relative;
	}

	@media (max-height: 800px) {
		.content-main {
			height: 80vh;
		}
	}

	.btn {
		width: 702rpx;
		height: 104rpx;
		background: #51D580;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		line-height: 104rpx;
		text-align: center;

	}

	.decorate-img {
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.plant-img {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.edit_bg {
		width: 594rpx;
		height: 554rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding-left: 40rpx;
		padding-right: 40rpx;
		box-sizing: border-box;

		.btn-section {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);

			.btn2 {
				width: 252rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: #51D580;
				border-radius: 74rpx;
				text-align: center;
				color: #fff;
				font-size: 28rpx;

			}
		}
	}

	::v-deep .u-input {
		width: 100%;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.popup-main {
		padding: 40rpx 52rpx;
		box-sizing: border-box;
	}

	.mask-img {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 999;
		background-image: url('http://bbsf.oss-cn-shanghai.aliyuncs.com/english/jiword/fristtip.png');
		background-size: 100% 100%;
	}
	.popup_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;
	
		.popup_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 52rpx;
			color: #FFFFFF;
			text-align: center;
			padding-top: 20rpx;
		}
	
		.popup_pro {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 42rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			width: 504rpx;
			height: 100rpx;
			margin: 120rpx auto 0;
		}
	
		.popup_cancel {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	
		.popup_sure {
			width: 252rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	
		.popup_see {
			width: 526rpx;
			height: 92rpx;
			background: #51D580;
			border-radius: 74rpx 74rpx 74rpx 74rpx;
			text-align: center;
			line-height: 92rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
	
</script>